<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*绝对定位方式*/
        /*.wrap {*/
        /*    position: relative;*/
        /*    width: 100%;*/
        /*    height: 200px;*/
        /*}*/
        /*.box1 {*/
        /*    position: absolute;*/
        /*    width: 150px;*/
        /*    height: 200px;*/
        /*    background-color: #d43131;*/
        /*}*/
        /*.box2 {*/
        /*    position: absolute;*/
        /*    left: 150px;*/
        /*    right: 0;*/
        /*    height: 200px;*/
        /*    background-color: #07d268;*/
        /*}*/
        /*浮动方式*/
        /*.box1 {*/
        /*    float: left;*/
        /*    width: 150px;*/
        /*    height: 200px;*/
        /*    background-color: #d43131;*/
        /*}*/
        /*.box2 {*/
        /*    margin-left: 150px;*/
        /*    height: 200px;*/
        /*    background-color: #07d268;*/
        /*}*/
        /*flex方式*/
        .wrap {
            display: flex;
            height: 200px;
        }
        .box1 {
            width: 150px;
            height: 200px;
            background-color: #3498db;
        }
        .box2 {
            flex: 1;
            height: 200px;
            background-color: #2ecc71;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>
</body>
</html>
